<template>
  <div class="exhibits-box">
    <p class="exhibits-title-size">逛展品</p>
    <div class="exhibits-list" id="exhibits-scroll-home">
      <div :class="{ 'icon-null': current === 0 }" class="left-icon" @click="addCruuent(1)">
        <!-- <t-icon name="chevron-left" size="20" style="color: #cfbda8"></t-icon> -->
        <i class="doorIcon"> &#xe638; </i>
      </div>
      <div :class="{ 'icon-null': current === list.length - 4 }" class="right-icon" @click="addCruuent(2)">
        <!-- <t-icon name="chevron-right" size="20" style="color: #cfbda8"></t-icon> -->
        <i class="doorIcon"> &#xe639; </i>
      </div>
      <div class="exhibits-scroll">
        <div class="exhibits-scroll-box" :style="{ transform: `translateX(-${scrollWidth * current}px)` }">
          <div
            class="exhibits-scroll-box-item"
            :class="'exhibits-scroll-box-item-content' + index"
            @mousemove="mouseOver($event, index)"
            @mouseleave="mouseLeave($event, index)"
            @click="pathInfo(item.refId)"
            v-for="(item, index) in list"
            :key="index"
          >
            <div class="exhibits-scroll-box-item-content" :style="{ width: widths + 'px' }">
              <img
                :style="{
                  transform:
                    rotateIndex === index
                      ? `matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0,${rotateX},${rotateY}, 0, 1},)`
                      : 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)',
                }"
                class="exhibits-scroll-boximg"
                :src="
                  item.coverUrl
                    ? urls + item.coverUrl + '?imageView2/2/w/624/format/webp'
                    : publicUrls + 'assets/img/companyImg.png'
                "
                alt=""
              />
              <div class="item-btm" :style="{ width: widths + 'px' }">
                <div class="item-btm-text">
                  <span class="btm-name">
                    <span> {{ item.name }}</span>
                    <span class="solid"></span>
                  </span>
                  <!-- <span> 
                    {{ item.name }} 
                    <span class="solid"></span>
                  </span> -->
                </div>
                <div class="item-avatar">
                  <div class="auth-avatar-box-home">
                    <t-avatar
                      size="28px"
                      :image="
                        item.orgCoverUrl
                          ? urls + item.orgCoverUrl + '?imageView2/2/w/28/h/28/format/webp'
                          : publicUrls + 'assets/img/companyImg.png'
                      "
                    ></t-avatar>
                    <img
                      v-if="item.orgAuthType > 0"
                      class="auth-avatar-box-home-img"
                      src="//static.jiyi.show/door/isAuthIcon.svg"
                      alt=""
                    />
                  </div>

                  <span class="avatar-name">{{ item.orgName }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="banner-title">
      <div class="banner-title-1">
        <span class="banner-title-1-text" @click="pathVisitExhibits">
          探索更多展品
          <span class="solid"></span>
        </span>
        <i class="doorIcon" style="cursor: pointer"> &#xe639; </i>
      </div>
    </div>
  </div>
</template>  

<script setup lang="ts">
// @ts-nocheck
import { publicUrls } from '@/utils/minxin';
import { initMove3D, initMove } from './3d';
import { list2 } from './data';
import { urls } from '@/utils/request/upload';
import { handlemouse } from '@/utils/minxin';
import { ref, onMounted, nextTick } from 'vue';
import { recommendList } from '@/api/door/door';
import { useRouter } from 'vue-router';

const router = useRouter();
const parmas = ref({
  type: 2,
  pageSize: 8,
});

const rotateArr = ref([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
const rotateIndex = ref(null);
const rotateX = ref(0);
const rotateY = ref(0);
const translateZ = ref('0px');
const list = ref([]);
const current = ref(0);
// const scrollWidth = ref(336);
const scrollWidth = ref(448);
const widths = ref(442);
const initWidth = () => {
  var element = document.getElementById('exhibits-scroll-home');
  var width = element.offsetWidth;
  let arr = (width - 72) / 4;
  scrollWidth.value = arr + 24;
  widths.value = arr;
  console.log(arr);

  // var screenWidth = window.innerWidth;
  //  if(window.innerWidth>=1920){
  //   scrollWidth.value = (screenWidth / 1440) * 268;
  // }else{
  //   scrollWidth.value = (screenWidth / 1440) * 448;
  // }

  // var screenWidth = window.innerWidth;
  // scrollWidth.value = (screenWidth / 1440) * 446;
};
nextTick(() => {
  initWidth();
  window.addEventListener('resize', () => {
    console.log('监听');
    initWidth();
  });
});
const init = async () => {
  try {
    let { data } = await recommendList(parmas.value); //获取首页展品数量
    list.value = data;
    nextTick(() => {
      initMove({
        selector: '.exhibits-scroll-box-item-content',
        shine: true,
        sensitivity: 40,
      });
    });

    //   setTimeout(() => {
    //   $('.exhibits-scroll-box-item').hover3d({
    //     selector: '.exhibits-scroll-box-item-content',
    //     shine: true,
    //     sensitivity: 80,
    //   });
    // }, 1000);
  } catch {}
};
init();
const pathVisitExhibits = () => {
  router.push({ path: '/exhibits' });
};
const pathVisitExhibitsInfo = (e: number) => {
  router.push({ path: '/portal/visitExhibitsInfo', query: { showpieceid: e } });
};
const addCruuent = (type: number) => {
  if (type === 1) {
    if (current.value !== 0) {
      current.value = current.value - 1;
    }
  } else {
    if (current.value < list.value.length - 4) {
      current.value = current.value + 1;
    }
  }
};
const mouseOver = (event, index) => {};
const mouseLeave = (event, index) => {};

const pathInfo = (e: number) => {
  router.push({ 
    path: '/exhibit',
    query: {
      showpieceid: e,
    },
  });
};

onMounted(() => {});
initMove3D();
</script>
 
<style lang="less" scoped>
.exhibits-box {
  display: flex;
  flex-direction: column;
  min-width: 1320px;
  width: 80%;
  margin-bottom: 80px;
  margin-top: 80px;
}
.exhibits-title-size {
  font-size: 32px;
  font-weight: 600;
  color: #000000;
  line-height: 48px;
  margin-bottom: 30px;
}
.exhibits-list {
  display: flex;
  align-items: center;
  position: relative;
  min-width: 1320px;
  width: 100%;
  height: calc(416px + 90px);
}

.left-icon {
  position: absolute;
  z-index: 666;
  left: -20px;
  bottom: 188px;
}
.left-icon:hover {
  transform: scale(1.25);
  box-shadow: none;
}
.right-icon:hover {
  transform: scale(1.25);
}
.icon-null:hover {
  transform: scale(1);
}
.right-icon {
  position: absolute;
  right: -20px;
  z-index: 666;
  bottom: 188px;
}
.left-icon,
.right-icon {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #ffffff;
  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.05), 0px 2px 4px -1px rgba(0, 0, 0, 0.12);
  border-radius: 20px;
  transition: all 0.2s;
  .doorIcon {
    color: rgba(190, 190, 190, 1);
    font-size: 20px;
  }
}
.icon-null {
  // pointer-events: none;
  cursor: not-allowed;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  z-index: 999;
  box-shadow: none !important;
  .doorIcon {
    color: rgba(190, 190, 190, 0.5);
    font-size: 20px;
  }
}
.exhibits-scroll {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}
.exhibits-scroll-box {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  height: 100%;
  transition: all 0.3s;
}
.exhibits-scroll-box-item {
  position: relative;
  height: 466px;
  margin-right: 24px;
  //  transform-style: preserve-3d;
  // transition: transform 0.2s;
  // transition: -webkit-transform .2s ease-out;
  transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}
.hover-in {
  transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}
.hover-out {
  transition: -webkit-transform 0.2s ease-in;
  transition: transform 0.2s ease-in;
  transition: transform 0.2s ease-in, -webkit-transform 0.2s ease-in;
}
.exhibits-scroll-box-item-content {
  cursor: pointer;
  display: flex;
  justify-content: center;
  position: relative;
  width: 312px;
  height: calc(416px + 50px);
  img {
    transform-style: preserve-3d;
    transition: all 0.3s ease-in-out;
    position: relative;
    perspective: 1000px;
    z-index: 50;
    max-width: 264px;
    max-height: 232px;
    width: auto;
    height: auto;
    object-fit: contain;
    // transition: transform 0.2s ease-out;
  }
}
.exhibits-scroll-boximg {
  transform-style: preserve-3d;
  transition: all 0.3s ease-in-out;
  perspective: 1000px;
}
.item-btm {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 312px;
  height: 416px;
  background: @door-backgroundCard-color;
  border-radius: 6px;
  padding: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-btm-text {
  display: flex;
  height: 25px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin-top: calc(206px - 24px);
  transition: -webkit-transform 0.2s ease-in;
  transition: transform 0.2s ease-in;
  transition: transform 0.2s ease-in, -webkit-transform 0.2s ease-in;
  .btm-name {
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 18px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.8);
    line-height: 24px;
    transition: -webkit-transform 0.2s ease-in;
    transition: transform 0.2s ease-in;
    transition: transform 0.2s ease-in, -webkit-transform 0.2s ease-in;
    .solid {
      position: absolute;
      bottom: 0px;
      left: 0;
      width: 0;
      height: 2px;
      background: #000000;
      border-radius: 1px;
      opacity: 0.8;
      transition: all 0.3s;
    }
  }
}

.item-avatar {
  display: flex;
  align-items: center;
}
.avatar-name {
  margin-left: 8px;
  font-size: 16px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.59);
  line-height: 24px;
}
.banner-title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 30px;
  .doorIcon {
    font-size: 24px !important;
    color: @door-font-color !important;
  }
  span {
    cursor: pointer;
    font-size: 20px;

    font-weight: 600;
    color: @door-font-color;
    line-height: 30px;
    margin-right: 8px;
  }
}
.banner-title-1 {
  display: flex;
  align-items: center;
}
.banner-title-1-text {
  display: flex;
  position: relative;
}
.solid {
  position: absolute;
  bottom: 0px;
  height: 2px;
  left: 0;
  width: 0px;
  background: @door-font-color;
  transition: all 0.2s;
}
.banner-title-1:hover {
  span {
    color: @door-font-color;
  }
  .banner-title-1-text {
    .solid {
      width: 120px;
      z-index: 60;
    }
  }
  :deep(.t-icon) {
    color: @door-font-color !important;
  }
}
.exhibits-scroll-box-item-content:hover {
  .item-btm-text {
    span {
      .solid {
        position: absolute;
        bottom: 0px;
        left: 0;
        width: 100%;
        height: 2px;
        background: #000000;
        border-radius: 1px;
        opacity: 0.8;
        transition: all 0.3s;
      }
    }
  }
}
.shine {
  z-index: 20;
}
// @media screen and (min-width: 1920px) {
//   .exhibits-box {
//     width: 1920px;
//   }
//   .exhibits-list {
//     width: 1920px;
//     height: calc(336px + 90px);
//   }
//   .exhibits-scroll-box-item {
//     position: relative;
//     width: 252px;
//     height: calc(336px + 50px);
//     margin-right: 24px;
//   }
//   .exhibits-scroll-box-item-content {
//     width: 252px;
//     height: calc(336px + 50px);
//     img {
//       max-width: 204px;
//       max-height: 108px;
//       width: auto;
//       height: auto;
//       // transition: transform 0.2s ease-out;
//     }
//   }
//   .item-btm {
//     width: 252px;
//     height: 336px;
//   }
//   .left-icon {

//   bottom: 148px;
// }
// .right-icon {

//   bottom: 148px;
// }
// }
</style>